<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        #app{
            display: flex;
            flex-wrap: wrap;
        }
        .pic{
            width: 60px;
        }
        .icon{
            width: 30px;
            height: 30px;
        }
        .text-center{
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="app">
        
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名字</th>
                    <th>海报</th>
                    <th>评分</th>
                    <th>是否收藏</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr @click="handleDetail(item._id)" v-for="item of movies" :key="item._id">
                    <td>{{item._id}}</td>
                    <td>{{item.title}}</td>
                    <td>
                        <img class="pic" :src="item.pic" alt="">
                    </td>
                    <td>{{item.rating}}</td>
                    <td>
                        <img class="icon" :src="item.collected?'./images/collection.png':'./images/collection-anti.png'" @click="handleCollected(item._id,item.collected)">
                    </td>
                    <td>
                        <button @click="handleDelete(item._id)" type="button" class="btn btn-danger">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <nav aria-label="Page navigation" class="text-center">
            <ul class="pagination pagination-lg">
              <li>
                <a href="javascript:void(0)" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li v-for="item of pages"><a @click="handlePage(item)" href="javascript:void(0)">{{item}}</a></li>
              <li>
                <a href="javascript:void(0)" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
    </div>
    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    movies:[],
                    total:''
                }
            },
            mounted(){
                this.getData()
                
            },
            methods:{
                getData(){
                    $.ajax({
                        url:'http://127.0.0.1:7001/',
                        success:res=>{
                            this.movies = res.res
                            this.total = res.total
                        }
                    })
                },
                async handleCollected(id,collected){
                    collected = !collected
                    await $.ajax({
                        url:'http://127.0.0.1:7001/collect',
                        type:'POST',
                        data:{
                            id,
                            collected
                        },
                        success:res=>{
                            this.getData()
                        }
                    })
                },
                async handleDelete(id){
                    var movies = this.movies.filter(item=>{
                       return  item._id!=id
                    })
                    
                    await $.ajax({
                        url:'http://127.0.0.1:7001/delete',
                        type:'POST',
                        data:{
                            id
                        }
                    })
                    this.movies = movies
                },
                async handlePage(num){
                    var start = (num-1)*5
                    $.ajax({
                        url:`http://127.0.0.1:7001/?start=${start}`,
                        success:res=>{
                            this.movies = res.res
                            this.total = res.total
                        }
                    })
                },
                async handleDetail(id){
                    console.log(id);
                    location.href=`html/detail.html?id=${id}`
                }
            },
            computed:{
                pages(){
                    var total = this.total
                    var arr = []
                    for(let i=0;i<total;i+=5){
                        arr.push(i)
                    }
                    var res = arr.map(item=>{
                        return (item+5)/5
                    })
                    return res
                }
            }
        })
    </script>
</body>
</html>